$(function() {
    // 初始化文章分类列表   并封装
    fllb()

    function fllb() {
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(({ data: res }) => {
            // console.log(res);
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            layer.msg(res.message)
            let arr = ['<option value="">选择文章分类</option>']
            res.data.forEach(e => {
                if (e.Id < 0) return
                arr.push(`
                 <option value="${e.Id}">${e.name}</option>
                 `)
            })
            $('[name=cate_id]').empty().html(arr.join(''))
            layui.form.render()
        })
    }


    //表格渲染
    // 定义一个对象存放参数
    let p = {
        pagenum: 1, //当前页
        pagesize: 3, // 显示多少条数据
        cate_id: '', //id
        state: '' //状态
    }
    bgxr()

    function bgxr() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: p
        }).then(({ data: res }) => {
            // console.log(res);
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            layer.msg(res.message)
            let arr = []
                // console.log(res.data);
            res.data.forEach(e => {
                arr.push(`
                <tr>
                        <td><a href="/article/look.html?id=${e.Id}" target="fm3" class="look" data-id="${e.Id}">${e.title}</a> </td>
                        <td>${e.cate_name}</td>
                        <td>${riqi(e.pub_date)}</td>
                        <td>${e.state}</td>
                        <td>
                            <button data-id="${e.Id}" class="layui-btn layui-btn-warm layui-btn-xs art_xg">修改</button>
                            <button data-id="${e.Id}" class="layui-btn layui-btn-danger layui-btn-xs art_sc">删除</button>
                        </td>
                    </tr>
                `)
            })
            $('tbody').empty().html(arr.join(''))
                // 分页
            layui.use('laypage', function() {
                let laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号
                    count: res.total, //数据总数，从服务端得到
                    curr: p.pagenum,
                    limit: p.pagesize,
                    layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
                    limits: [3, 5, 10],
                    jump: function(obj, first) {
                        //obj包含了当前分页的所有参数，比如：
                        // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        //console.log(obj.limit); //得到每页显示的条数

                        //首次不执行
                        if (!first) {
                            p.pagesize = obj.limit
                            p.pagenum = obj.curr
                            bgxr()
                        }
                    }
                })
            })
        })
    }

    // 日期格式化
    function riqi(num) {
        let T = new Date(num)
        let y = T.getFullYear()
        let m = bu0(T.getMonth() + 1)
        let d = bu0(T.getDate())
        let hh = bu0(T.getHours())
        let mm = bu0(T.getMinutes())
        let ss = bu0(T.getSeconds())
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    }

    function bu0(n) { return n < 10 ? '0' + n : n }
    // 筛选点击事件
    $('#list_form').on('submit', function(e) {
        e.preventDefault()
            // console.log($('[name=cate_id]').val());
        p.cate_id = $('[name=cate_id]').val()
        p.state = $('[name=state]').val()
        bgxr()
    })
    $('[type=reset]').on('click', function(e) {
        // e.preventDefault()
        $('[name=cate_id]').val('')
        $('[name=state]').val('')
        $('#sx').click()
    })


    // 删除
    $('tbody').on('click', '.art_sc', function() {
        // 取出id
        let id = $(this).attr('data-id')
            // console.log(id);
        axios({
            method: 'GET',
            url: '/my/article/delete/' + id
        }).then(({ data: res }) => {
            // console.log(res);
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            layer.msg(res.message)
                // 重新渲染
            bgxr()
        })
    })

    //修改

    $('tbody').on('click', '.art_xg', function() {
            let id = $(this).attr('data-id')
            layer.open({
                type: 1,
                title: '文章修改',
                area: ['1400px', '800px'],
                content: `
                    <div class="layui-body" style="left:0">
                    <iframe src="/article/tolist.html?id=${id}" name="fm2"></iframe>
                </div> `,
                success: function() {

                },
                end: function() {
                    bgxr()
                }
            })

        })
        //预览
    $('tbody').on('click', '.look', function() {
        // console.log($(this));
        let id = $(this).attr('data-id')
        layer.open({
            type: 1,
            title: '文章预览',
            area: ['1400px', '800px'],
            content: `
            <div class="layui-body" style="left:0">
            <iframe src="/article/look.html?id=${id}" name="fm3"></iframe>
        </div> `,
        })

    })



})